<template>
    <div class="withdrawal">
        <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp"></gltitle>
        <div class="withdrawal-con">
<!--            <div class="withdrawal-input">-->
<!--                <div class="name">{{ $t('new.desc11') }}</div>-->
<!--                <div class="input">-->
<!--                    <input type="text" v-model="bankname" :placeholder="$t('new.desc12')" />-->
<!--                </div>-->
<!--            </div>-->
            <!-- <div class="withdrawal-input">
                <div class="name">{{ $t('new.desc13') }}</div>
                <div class="input">
                    <input type="text" v-model="bankcard" onkeyup="this.value=this.value.replace(/[^\d]/g,'') "
                        :placeholder="$t('new.desc14')" />
                </div>
            </div>
            <div class="withdrawal-input">
                <div class="name">{{ $t('new.desc15') }}</div>
                <div class="input">
                    <input type="text" v-model="username" :placeholder="$t('new.desc16')" />
                </div>
            </div> -->




            <div class="withdrawal-input">
                <div class="name">{{ $t('new.desc17') }} <p>{{ $t('new.desc18') }} <span>{{ totalMoney }}</span></p>
                </div>
                <div class="input">
                    <input type="text" v-model="money" onkeyup="value=value.replace(/[^\d^\.]+/g,'')"
                        :placeholder="$t('new.desc19')" @change="handlerMoney" />
                </div>
                <div class="tips">{{ $t('new.desc20') }} {{ infoconfig.min }}</div>
            </div>

          <div class="withdrawal-input">
            <div class="name">{{ $t('new.doc11') }}</div>
            <div class="input" @click="getBank">
              <div class="fx">
                <input type="text" v-model="bankname" :placeholder="$t('new.doc12')" readonly/>

              </div>
              <div class="ico"><van-icon name="arrow-down" /></div>

            </div>
          </div>
        </div>
        <div class="withdrawal-btn flexcenter" @click="getPayPass" :class="{ispcbtn:mobile==2}">{{ $t('word.ok') }}</div>
        <verifyPass :isShow_VerifyPssPopup="isShow_VerifyPssPopup" @hadleHideVerifyPssPopup="hadleHideVerifyPssPopup"
            @getPayPass="getPayPass"></verifyPass>

      <van-popup v-model="showBank" position="bottom" style="background: #000">
        <ul class="bankList">
          <li v-for="(item,k) in bankList" :key="k" @click="getItem(item)">
            <div class="name">{{item.accountName}} {{item.accountNumber}} ({{ item.accountBank }})</div>
<!--            <div class="ico"><van-icon name="success" /></div>-->
          </li>
          <li class="add" @click="getPath('/member/add_bank')">
            <div class="ico"><van-icon name="plus" /></div>
            <div class="name">{{ $t('new.doc1') }}</div>
          </li>
        </ul>
      </van-popup>

    </div>
</template>

<script>
export default {
    data() {
        return {
            mobile:localStorage.getItem('ismobile'),
            titleSize: this.$t('new.desc6'),
            is_mt: true,
            infoconfig: {},
            totalMoney: '',
            bankname: '',
            bankcard: '',
            username: '',
            money: '',
            isShow_VerifyPssPopup: false,
          showBank:false,
          bankList:[],
          userBankId:'',
          currency:''
        }
    },
    mounted() {
        this.$post(this.URL.withdrawal.config, {}).then(res => {
            this.infoconfig = res.data;
        })
      this.$post(this.URL.user.currencyList, {
        type:'SELL'
      }).then(res => {
        this.currency = res.data[0];
      })
        this.getMoney();
    },
    methods: {
      getItem(item){
        this.userBankId = item.id
        this.bankname = item.accountName + ' ' + item.accountBank + ' ' + item.accountNumber
        this.showBank = false
      },
      getBank(){
        this.$post(this.URL.user.bankList,{
          pageSize:100
        }).then( res =>{
          this.bankList = res.data.list
          this.showBank = true
        })
      },
      getPath(url){
        this.$router.push(url)
      },
        getMoney() {
            this.$post(this.URL.withdrawal.wallet, {}).then(res => {
                this.totalMoney = parseFloat(res.data.totalUSDTBalance);
            })
        },
        handlerMoney(val) {
            if (this.money < parseFloat(this.infoconfig.min)) {
                this.$toast(`${this.$t('new.desc20')}${parseFloat(this.infoconfig.min)}`)
            } else if (this.money > this.totalMoney) {
                this.money = this.totalMoney
            } else if (this.money > parseFloat(this.infoconfig.max) && this.money > this.totalMoney) {
                this.$toast(`${this.$t('new.desc21')}${this.infoconfig.max}`);
                this.money = this.totalMoney
            } else if (this.money > parseFloat(this.infoconfig.max)) {
                this.$toast(`${this.$t('new.desc21')}${this.infoconfig.max}`);
            }
        },
        handlerSubmit() {
            if (this.bankname != '' && this.money != '') {
                this.isShow_VerifyPssPopup = true;
            }
        },
        hadleHideVerifyPssPopup() {
            this.isShow_VerifyPssPopup = false;
        },

        getPayPass(pass) {
            this.isShow_VerifyPssPopup = false;
            this.$post(this.URL.user.cashSell, {
              currency:this.currency,
              amount: this.money,
              userBankId:this.userBankId,
                password: '',
                // toAddress: this.bankname
            }).then(res => {
                if (res.code == 0) {
                    this.$toast(this.$t('new.desc22'));
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1500)
                } else {
                    this.$toast(res.message);
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.withdrawal {

    .withdrawal-con {
        padding: 1.08rem 0 0;

        .withdrawal-input {
            padding: .32rem;
            margin-bottom: .2rem;
            background: #fff;

            .name {
                position: relative;
                font-size: .26rem;
                line-height: .3rem;

                p {
                    position: absolute;
                    top: 0;
                    right: 0;
                    font-size: .22rem;

                    span {
                        color: #E51F1F;
                    }
                }
            }

            .input {
              margin: .2rem 0;
                background: none;
                border-radius: .04rem;
              display: flex;
              align-items: center;
              .fx {
                flex:1;
              }
              .ico {
                i {
                  font-size: .32rem;
                  vertical-align: middle;
                }
              }
                input {
                    width: 100%;
                    height: .4rem;
                    font-size: .3rem;

                    border: 0;
                    background: none;

                    &::placeholder {
                      color: #98969E;
                      font-size: .24rem;
                    }
                }
            }

            .tips {
                margin-top: .1rem;
                font-size: .22rem;
                color: #999999;
            }
        }
    }

    .withdrawal-btn {
        position: fixed;
        bottom: .9rem;
        left: 50%;
        width: 6rem;
        height: 0.88rem;
        background: #713FF5;
        font-size: .32rem;
        color: #FFFFFF;
        border-radius: 0.12rem;
        transform: translateX(-50%);
    }
}

.bankList {
  padding:.26rem;
  li {
    display: flex;
    justify-content: center;
    padding: .1rem 0;
    margin: .1rem 0;
    .name {
      flex:1;
      margin-right: .2rem;
    }
    i {
      font-size: .32rem;
      vertical-align: middle;
    }
  }
  .add {
    .ico {
      margin-right: .1rem;
    }
    i {
      font-size: .28rem;
    }
  }
}
</style>
